<template>
  <div v-if="menuList[0]">
    <!-- 顶部 -->
    <el-menu
      @select="topSelected"
      mode="horizontal"
      :default-active="'' + $store.state.topCurrent"
    >
      <el-menu-item :index="String(k)" v-for="(v, k) in menuList" :key="v.id">
        {{ v.label }}
      </el-menu-item>
    </el-menu>

    <!-- 左侧 -->
    <div style="width: 200px">
      <el-menu
        :default-active="String(sideCurrent)"
        :unique-opened="true"
        @select="sideSelected"
      >
        <template v-for="v in menuList[$store.state.topCurrent].children">
          <!-- 是否有子菜单 -->
          <el-submenu :index="String(v.id)" v-if="v.children" :key="v.id">
            <template slot="title">{{ v.label }}</template>
            <!-- 循环三级菜单 -->
            <el-menu-item
              v-for="v1 in v.children"
              :key="v1.id"
              :index="String(v1.id)"
            >
              {{ v1.label }}-{{ v1.id }}
            </el-menu-item>
          </el-submenu>
          <!-- 没有子菜单 -->
          <el-menu-item 
            :index="String(v.id)"
            v-else 
            :key="v.id"
          >{{
            v.label
          }}</el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [], // 保存所有按钮
    };
  },
  created() {
    this.$axios.get("/list.json").then((res) => {
      this.menuList = res.data.data;
    });
  },
  computed: {
    // 计算哪个二级或者三级菜单是选中的
    sideCurrent() {
      // 如果 vuex 中保存了点击的按钮就让这个按钮是选中的
      if(this.$store.state.sideCurrent) {
        return this.$store.state.sideCurrent
      } 

      // 如果 vuex 中是空的那么：
      // 先取出当前选中的一级菜单
      let topMenu = this.menuList[this.$store.state.topCurrent]
      // 取出当前的第一个二级菜单
      let subMenu = topMenu.children[0]
      // 如果这个二级还有三级
      if(subMenu.children) {  
        // 返回第一个三级的ID
        return subMenu.children[0].id
      } else {
        // 如果没有三级直接返回二级的ID
        return subMenu.id
      }

    }
  },
  methods: {
    // 顶级按钮切换时
    topSelected(index) {
      this.$store.commit("setTopCurrent", index);

      // 清除之前保存的二级菜单的选中
      this.$store.commit('setSideCurrent', '')
    },
    // 左侧菜单被点击了
    sideSelected(index) {
      // 把点击的按钮的名字保存到 vuex 中
      this.$store.commit('setSideCurrent', index)
    }
  }
};
</script>